<template>
	<div>
		<div class="header">
					<el-page-header @back="goBack" :content="title + '图片选取'">
					</el-page-header>
		</div>
		<div class="main-bg">
			<div class="main">
				<div style="margin-left: 20px;padding:20px 20px 0 0;display: flex;justify-content: space-between;">
					<div><el-button type="primary" @click="add">添加</el-button></div>
					<div>
						<el-button type="primary" @click="all">全选</el-button>
						<el-button type="primary" @click="allnone">全部取消</el-button>
					</div>
					<!-- <el-input placeholder="请输入关键词进行搜索" v-model="keyword" class="input-with-select">
					  </el-input>
					  <el-button type="primary" icon="el-icon-search" @click="getlist()"></el-button> -->
				</div>
				<div class="main-box" style="padding-bottom: 20px;">
					<div class="main-item" v-for="(item,index) in list" :key="index">
						<div style="text-align: center;font-size: 20px;">
							{{item.name}}
						</div>
						<div calss="main-photo" @click="look(item)" >
							<!-- <img :src="imgurl + item.image_url" alt="" style="width: 100%;height: 175px;" > -->
							<el-image
							   style="width: 100%;height: 175px;"
							   :src="imgurl + item.image_url" >
							 </el-image>
						</div>
						
						<div class="main-btn">
							<div>
								<el-button type="text" @click="look(item)">详情</el-button>
								<!-- <el-button type="text">编辑</el-button> -->
							</div>
							<div>
								 <el-checkbox v-model="item.is_xuan" @change="checkClick(index)" >选中</el-checkbox>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
		<el-dialog :title="form.id?'查看':'添加'" :visible.sync="dialogVisible" width="40%">
			<span>
				<el-form ref="form"  :model="form" label-width="100px"  :inline="false">
					<el-form-item label="图片名称" required  >
						 <el-input   v-model="form.name" clearable style="width: 200px;" :disabled ="form.id?true:false"  ></el-input>
					</el-form-item>	
					<div style="display: flex;">
						<el-form-item label="展品图"  :required="true">
							<el-upload class="avatar-uploader" :action="url+'back/common/upload'" :show-file-list="false"
							:disabled ="form.id?true:false"
								:headers="headers" >
								<el-image
								class="avatar"
								v-if="form.image_url"
								   style="width: 100%;height: 175px;"
								   :src="imgurl+form.image_url" 
								   :preview-src-list="[imgurl+form.image_url]">
								 </el-image>
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</el-form-item>
						<el-form-item label="详情图"  :required="true">
							<el-upload class="avatar-uploader" :action="url+'back/common/upload'" :show-file-list="false"
								:disabled ="form.id?true:false"
								:headers="headers" >
								<el-image
								class="avatar"
								v-if="form.introduce_url"
								   style="width: 100%;height: 175px;"
								   :src="imgurl+form.introduce_url" 
								   :preview-src-list="[imgurl+form.introduce_url]">
								 </el-image>
								<i v-else class="el-icon-plus avatar-uploader-icon" ></i>
							</el-upload>
						</el-form-item>
					</div>
					
						 <el-form-item label="视频" :required="true" v-if="form.video_url" >
						              <el-upload :action="url+'back/common/upload'" :headers="headers" class="avatar-uploader" style="width:500px"
						                         :show-file-list="false"  accept="video/*"
												 :disabled ="form.id?true:false"
						                         >
						                <video
						                  v-if="form.video_url"
						                  :src="imgurl+form.video_url"
						                  class="video-avatar"
						                  :autoplay="false"
						                  controls="controls"
						                  muted
						                  loop
						                ></video>
						               <i v-else class="el-icon-plus avatar-uploader-icon" style="width: 500px;"></i>
						              </el-upload>
						            </el-form-item>
				</el-form>
			</span>
			<span slot="footer" class="dialog-footer" v-if="form.id?false:true">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit()">确 定</el-button>
			</span>
		</el-dialog>
		
	</div>
</template>

<script>
	import setting from '@/config/setting';
	import ConLeft from '@/components/ConLeft/ConLeft.vue'
	export default{
		data(){
			return {
				title:'',
				page:1,
				total:0,
				list:[],
				keyword:'',
				url: process.env.VUE_APP_API_BASE_URL,
				imgurl:process.env.VUE_APP_IMG_BASE_URL,
				headers: {
					token: setting.takeToken()
				},
				form:{},
				dialogVisible:false,
				id:'',
				product_id:'',
				picture_ids:[]
			}
		},
		mounted(){
			this.title = this.$route.query.name
			this.id = this.$route.query.id
			this.product_id = this.$route.query.product_id
			
			this.getlist()
		},
		methods:{
			getlist(){
				// this.$http.get('back/picture/list?page=' + this.page + '&keyword=' + this.keyword).then(res => {
				// 	console.log(res.data.data)
				// 	this.page = res.data.data.current_page
				// 	this.total =res.data.data.total
				// 	this.list = res.data.data.data
				// })
				this.$http.get('/back/mode/pictureList?product_id=' + this.product_id + '&id=' + this.id).then(res => {
					console.log(res)
					res.data.data.forEach((item) => {
						if(item.is_xuan == 1){
							item.is_xuan = true
						} else {
							item.is_xuan = false
						}
						this.list.push(item)
					})
					
				})
			},
			all(){
				this.list.forEach((item) =>{
					item.is_xuan = true
				})
			},
			allnone(){
				this.list.forEach((item) =>{
					item.is_xuan = false
				})
			},
			add(){
				this.picture_ids = []
				this.$confirm('此操作将修改选中图片, 是否继续?', '提示', {
				         confirmButtonText: '确定',
				         cancelButtonText: '取消',
				         type: 'warning'
				       }).then(() => {
						   this.list.forEach((item) => {
						   	if(item.is_xuan){
						   		this.picture_ids.push(item.id)
						   	}
						   })
											this.$http.post('/back/mode/confirm',{
												id:this.id,
												picture_ids:this.picture_ids
											}).then(res => {
												if (res.data.code == 1) {
													this.$message({
														message: res.data.msg,
														type: 'success'
													});
													this.list = []
													this.getlist();
												} else {
													this.$message.error(res.data.msg);
												}
											})
				         
				       }).catch(() => {
				         this.$message({
				           type: 'info',
				           message: '已取消'
				         });          
				       });
			},
			checkClick(index){
				console.log(this.list[index].is_xuan)
			},
			look(item){
				this.$set(this,'form',item)
				console.log(this.form)
				this.dialogVisible = true;
			},
			goBack(){
				this.$router.go(-1)
			},
			handleSizeChange(val) {
			    console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
			    console.log(`当前页: ${val}`);
				this.page=val;
				this.getlist();
			},
		}
		
	}
</script>

<style lang="scss" scoped>
	.header{
		width: 100%;
		height:60px;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding-left: 20px;
		box-sizing: border-box;
	}
	.main-bg{
		padding:20px;
		.main{
			background-color: #fff;
			min-height: 800px;
			.input-with-select{
				margin: 20px 0 0 20px;
						width:360px;
			}
			.main-box{
				margin-top: 20px;
				   /*创建网格布局*/
				  display: grid; 
				 /* 分为几列，可以设置列的宽度 */
				  grid-template-columns: auto auto auto auto auto;
				  /* 网格之间的距离 */
				  grid-gap:10px;
				  .main-item{
				  	width:230px;
				  	height:230px;
				  	margin: 0 15px;
				  	.main-btn{
				  		margin-top: 5px;
				  		display:flex;
				  		justify-content: space-between;
				  		font-size: 20px;
				  	}
				  }
			}
		}
		
	}
	.video-avatar{
		width: 500px;
		height:300px;
		display: block;
		// left:30px;
	}
	.avatar-uploader  {
		width: 178px;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	
	.avatar-uploader:hover {
		border-color: #409EFF;
	}
	
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}
	
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>